import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import first from '@/components/first'


Vue.use(Router)
const routes=[
  {
    path: '/',
    redirect:'/first'
  },
  {
    path: '/HelloWorld',
    name: 'HelloWorld',
    meta:{
      title:'hello'
    },
    // component:HelloWorld,
    // 懒加载的方式替换一次性将所有组件打包到一个文件夹之下
    component: ()=>import('@/components/HelloWorld'),
    children:[
      {
        path:'hellochildren',
        component:()=>import('@/components/helloword/helloChildren')
      }
    ]
  },
  {
    name:'first',
    path:'/first',
    meta:{
      title:'首页'
    },
    component:()=>import('@/components/first')
  }
]

 const router=new Router({
  routes,
  //浏览器由http://localhost:8080/#/first
  // 转换为http://localhost:8080/first显示方式
  mode:'history'
})

// 在每次路由跳转之前做的操作
router.beforeEach((to,from,next)=>{
  
  // 要跳转的目标路由
  //获取要跳转的目标路由meta中的title属性，并赋值给窗口的title
  // document.title=to.meta.title;
  //需要换成如下方式获取路由中设置title属性，因为存在to的目标可能是路由下的子路由。即嵌套路由
  // 所以有可能获取不到子路由中设置的meta属性，所以统一改为获得顶级路由地址的title属性
  //  /first/second/threed   /first为顶级路由地址，
  // 由matched[0]得到，matched[1]得到second的路由对象
   document.title=to.matched[0].meta.title;
  // 路由放行，如果这个不书写，则跳转路由将失败
  next();
});
export default router
